<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片管理 - Apollo Admin</title>
    
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="/back/css/reset.css" type="text/css" media="screen" />
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="/back/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/back/css/invalid.css" type="text/css" media="screen" />
    
    <!-- jQuery -->
    <script type="text/javascript" src="/back/scripts/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="/back/scripts/simpla.jquery.configuration.js"></script>
    <script type="text/javascript" src="/back/scripts/facebox.js"></script>
    
    <!-- dialog弹出框的导入-->
    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>
    
    <!--引入webuploader-->
    <link rel="stylesheet" type="text/css" href="/back/widget/webuploader/webuploader.css">
    <script type="text/javascript" src="/back/widget/webuploader/webuploader.min.js"></script>
    <script type="text/javascript" src="/commons/js/myupload.js"></script>
    
    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>
    
    <style>
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .image-item {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #fff;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .image-item:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .image-preview {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        
        .image-info {
            font-size: 12px;
            color: #666;
            margin: 5px 0;
        }
        
        .image-actions {
            margin-top: 10px;
        }
        
        .btn-small {
            padding: 4px 8px;
            font-size: 11px;
            margin: 2px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .btn-process {
            background: #4CAF50;
            color: white;
        }
        
        .btn-delete {
            background: #f44336;
            color: white;
        }
        
        .btn-copy {
            background: #2196F3;
            color: white;
        }
        
        .upload-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin: 20px 0;
            background: #fafafa;
        }
        
        .upload-area:hover {
            border-color: #4CAF50;
            background: #f0f8f0;
        }
        
        .processing-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .option-group {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 15px;
        }
        
        .option-group h4 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .form-row {
            display: flex;
            gap: 10px;
            margin: 10px 0;
            align-items: center;
        }
        
        .form-row label {
            min-width: 80px;
            font-weight: bold;
        }
        
        .form-row input, .form-row select {
            flex: 1;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: #4CAF50;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .status-message {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        
        .status-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
    
    <script th:inline="javascript">
        let imageList = [];
        
        $(function () {
            // 初始化上传插件
            uploadInit((respData, file) => {
                loadImageList();
                showStatus('图片上传成功: ' + file.name, 'success');
            });
            
            // 加载图片列表
            loadImageList();
        });
        
        // 加载图片列表
        function loadImageList() {
            myajax({
                url: '/backs/api/image/list',
                success: function(data) {
                    displayImages(data || []);
                },
                error: function(xhr, status, error) {
                    showStatus('加载图片列表失败: ' + error, 'error');
                    displayImages([]);
                }
            });
        }
        
        // 显示图片列表
        function displayImages(images) {
            const container = $('#image-container');
            container.empty();
            
            if (images.length === 0) {
                container.html('<div style="text-align: center; padding: 40px; color: #666;">暂无图片</div>');
                return;
            }
            
            images.forEach(image => {
                const imageHtml = `
                    <div class="image-item" data-filename="${image.filename}">
                        <img src="/api/file/get?filename=${image.filename}" class="image-preview" alt="${image.filename}">
                        <div class="image-info">
                            <div>文件名: ${image.filename}</div>
                            <div>尺寸: ${image.width || '未知'} x ${image.height || '未知'}</div>
                            <div>大小: ${formatFileSize(image.size || 0)}</div>
                        </div>
                        <div class="image-actions">
                            <button class="btn-small btn-process" onclick="processImage('${image.filename}')">处理</button>
                            <button class="btn-small btn-copy" onclick="copyImageUrl('${image.filename}')">复制链接</button>
                            <button class="btn-small btn-delete" onclick="deleteImage('${image.filename}')">删除</button>
                        </div>
                    </div>
                `;
                container.append(imageHtml);
            });
        }
        
        // 处理图片
        function processImage(filename) {
            $('#current-filename').val(filename);
            openDialog('dialog_process', '图片处理 - ' + filename, 800, 600);
        }
        
        // 执行图片处理
        function executeProcessing() {
            const filename = $('#current-filename').val();
            const width = parseInt($('#target-width').val()) || 1920;
            const height = parseInt($('#target-height').val()) || 1080;
            const quality = parseFloat($('#quality').val()) || 0.9;
            
            if (!filename) {
                showStatus('请选择要处理的图片', 'error');
                return;
            }
            
            showProgress(0);
            showStatus('正在处理图片...', 'info');
            
            myajax({
                url: '/api/file/resize',
                type: 'POST',
                data: {
                    filename: filename,
                    width: width,
                    height: height,
                    quality: quality
                },
                success: function(data) {
                    showProgress(100);
                    showStatus('图片处理成功! 新文件: ' + data, 'success');
                    loadImageList();
                    closeDialog();
                },
                error: function(xhr, status, error) {
                    showProgress(0);
                    showStatus('图片处理失败: ' + error, 'error');
                }
            });
        }
        
        // 获取图片信息
        function getImageInfo(filename) {
            myajax({
                url: '/api/file/info',
                data: { filename: filename },
                success: function(data) {
                    if (data) {
                        showStatus(`图片信息 - 尺寸: ${data.width}x${data.height}, 大小: ${formatFileSize(data.fileSize)}`, 'info');
                    }
                }
            });
        }
        
        // 复制图片链接
        function copyImageUrl(filename) {
            const url = window.location.origin + '/api/file/get?filename=' + filename;
            navigator.clipboard.writeText(url).then(() => {
                showStatus('链接已复制到剪贴板', 'success');
            }).catch(() => {
                showStatus('复制失败，请手动复制: ' + url, 'error');
            });
        }
        
        // 删除图片
        function deleteImage(filename) {
            if (confirm('确定要删除这张图片吗？')) {
                myajax({
                    url: '/backs/api/image/delete',
                    type: 'DELETE',
                    data: { filename: filename },
                    success: function(data) {
                        showStatus('删除成功', 'success');
                        loadImageList();
                    },
                    error: function(xhr, status, error) {
                        showStatus('删除失败: ' + error, 'error');
                    }
                });
            }
        }
        
        // 显示状态信息
        function showStatus(message, type = 'info') {
            const statusDiv = $('#status-message');
            statusDiv.removeClass('status-success status-error status-info')
                     .addClass('status-' + type)
                     .text(message)
                     .show();
            
            setTimeout(() => {
                statusDiv.hide();
            }, 5000);
        }
        
        // 显示进度
        function showProgress(percent) {
            $('#progress-fill').css('width', percent + '%');
            if (percent === 0) {
                $('#progress-container').hide();
            } else {
                $('#progress-container').show();
            }
        }
        
        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
        // 预设尺寸选择
        function selectPreset(width, height) {
            $('#target-width').val(width);
            $('#target-height').val(height);
        }
        
        // 关闭对话框
        function closeDialog() {
            $('#dialog_process').dialog('close');
        }
    </script>
</head>
<body>
<div id="main-content">
    <div class="content-box">
        <div class="content-box-content">
            <h2>图片管理</h2>
            
            <!-- 状态消息 -->
            <div id="status-message" class="status-message" style="display: none;"></div>
            
            <!-- 进度条 -->
            <div id="progress-container" class="progress-bar" style="display: none;">
                <div id="progress-fill" class="progress-fill"></div>
            </div>
            
            <!-- 上传区域 -->
            <div class="upload-area">
                <h3>上传图片</h3>
                <p>点击下方按钮选择图片文件</p>
                <a id="picker" class="mybutton">选择文件</a>
                <div id="upload_list" style="margin-top: 15px;"></div>
            </div>
            
            <!-- 图片列表 -->
            <div class="tab-content default-tab">
                <h3>图片库</h3>
                <div id="image-container" class="image-grid">
                    <!-- 图片列表将在这里动态生成 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图片处理对话框 -->
<div id="dialog_process" style="display: none;">
    <div class="content-box-content">
        <h3>图片处理选项</h3>
        
        <input type="hidden" id="current-filename" />
        
        <div class="processing-options">
            <!-- 尺寸设置 -->
            <div class="option-group">
                <h4>尺寸设置</h4>
                <div class="form-row">
                    <label>宽度:</label>
                    <input type="number" id="target-width" value="1920" min="1" max="10000" />
                    <span>px</span>
                </div>
                <div class="form-row">
                    <label>高度:</label>
                    <input type="number" id="target-height" value="1080" min="1" max="10000" />
                    <span>px</span>
                </div>
                <div style="margin-top: 10px;">
                    <strong>预设尺寸:</strong><br>
                    <button class="btn-small btn-copy" onclick="selectPreset(1920, 1080)">1920x1080 (Full HD)</button>
                    <button class="btn-small btn-copy" onclick="selectPreset(1280, 720)">1280x720 (HD)</button>
                    <button class="btn-small btn-copy" onclick="selectPreset(800, 600)">800x600</button>
                </div>
            </div>
            
            <!-- 质量设置 -->
            <div class="option-group">
                <h4>质量设置</h4>
                <div class="form-row">
                    <label>质量:</label>
                    <input type="range" id="quality" min="0.1" max="1.0" step="0.1" value="0.9" 
                           oninput="$('#quality-value').text(this.value)" />
                    <span id="quality-value">0.9</span>
                </div>
                <div style="font-size: 12px; color: #666; margin-top: 5px;">
                    0.1 = 低质量小文件, 1.0 = 高质量大文件
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div style="text-align: center; margin-top: 20px;">
            <button type="button" class="mybutton" onclick="executeProcessing()">开始处理</button>
            <button type="button" class="mybutton" onclick="closeDialog()">取消</button>
        </div>
    </div>
</div>

</body>
</html>